<template>
  <div class="profile-page">
    <!-- 导航栏 -->
    <NavBar title="我的" :show-home-button="true" />
    
    <!-- 头部信息 -->
    <div class="header-section">
      <div class="user-info">
        <van-image
          :src="userInfo.avatar"
          width="80"
          height="80"
          round
          fit="cover"
        />
        <div class="user-details">
          <div class="username">{{ userInfo.name }}</div>
          <div class="user-title">{{ userInfo.title }}</div>
        </div>
      </div>
    </div>

    <div class="page-container">
      <!-- 功能菜单 -->
      <div class="menu-section">
        <van-cell-group>
          <van-cell
            v-for="menu in menuList"
            :key="menu.name"
            :title="menu.title"
            :icon="menu.icon"
            is-link
            @click="handleMenuClick(menu)"
          />
        </van-cell-group>
      </div>

      <!-- 系统设置 -->
      <div class="settings-section">
        <div class="section-title">系统设置</div>
        <van-cell-group>
          <van-cell
            v-for="setting in settingsList"
            :key="setting.name"
            :title="setting.title"
            :icon="setting.icon"
            is-link
            @click="handleSettingClick(setting)"
          />
        </van-cell-group>
      </div>

      <!-- 退出登录 -->
      <div class="logout-section">
        <van-button
          type="danger"
          block
          round
          @click="handleLogout"
        >
          退出登录
        </van-button>
      </div>
    </div>

    <TabBar />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { showToast, showConfirmDialog } from 'vant'
import NavBar from '@/components/NavBar.vue'
import TabBar from '@/components/TabBar.vue'

// 用户信息
const userInfo = ref({
  name: '张三',
  title: '数据分析师',
  avatar: 'https://picsum.photos/80/80?random=1'
})

// 功能菜单
const menuList = ref([
  {
    name: 'profile-edit',
    title: '个人信息',
    icon: 'contact'
  },
  {
    name: 'message',
    title: '消息中心',
    icon: 'chat-o'
  },
  {
    name: 'favorites',
    title: '我的收藏',
    icon: 'star-o'
  },
  {
    name: 'history',
    title: '浏览历史',
    icon: 'clock-o'
  }
])

// 系统设置
const settingsList = ref([
  {
    name: 'notification',
    title: '消息通知',
    icon: 'bell'
  },
  {
    name: 'privacy',
    title: '隐私设置',
    icon: 'lock'
  },
  {
    name: 'about',
    title: '关于我们',
    icon: 'info-o'
  },
  {
    name: 'feedback',
    title: '意见反馈',
    icon: 'comment-o'
  }
])

// 处理菜单点击
const handleMenuClick = (menu: any) => {
  showToast(`${menu.title}功能开发中...`)
}

// 处理设置点击
const handleSettingClick = (setting: any) => {
  showToast(`${setting.title}功能开发中...`)
}

// 退出登录
const handleLogout = async () => {
  try {
    await showConfirmDialog({
      title: '确认退出',
      message: '确定要退出登录吗？',
    })
    
    // 这里可以调用退出登录的API
    showToast('退出登录成功')
    
    // 可以跳转到登录页面
    // router.push('/login')
  } catch (error) {
    // 用户取消
  }
}
</script>

<style scoped>
.profile-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 80px;
}

.header-section {
  background: linear-gradient(135deg, #1E90FF 0%, #87CEEB 100%);
  padding: 16px 16px 24px;
  margin-top: 46px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.user-details {
  flex: 1;
  color: white;
}

.username {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
}

.user-title {
  font-size: 14px;
  opacity: 0.9;
}

.menu-section {
  margin: 16px 12px;
}

.settings-section {
  margin: 16px 12px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
  padding-left: 4px;
}

.logout-section {
  margin: 32px 16px 16px;
}

:deep(.van-cell-group) {
  border-radius: 8px;
  overflow: hidden;
}

:deep(.van-cell) {
  padding: 16px;
}

:deep(.van-cell__title) {
  font-size: 15px;
  font-weight: 500;
}

:deep(.van-cell__right-icon) {
  color: #c8c9cc;
}
</style>